<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <title>商城(移动端)--列表页</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_799009_3wbyz9blkgq.css"/>
    <link rel="stylesheet" href="../css/mall-list.css"/>
    <!--flex="dir:top main:center cross:center"-->

    <title></title>
</head>
<body>
<!--搜索栏 高88px 开始-->
<section id="search" flex="main:justify cross:center">
    <div class="search-input" flex-box="1" flex="main:center cross:center"><!--用flex-box="1"把搜索栏宽度自动撑开（会随着屏幕宽度变化而自动变化）-->
        <input type="text"/>
        <div class="text" flex="main:center cross:center">
            <i class="iconfont icon-cearch"></i>
            <span>搜索商家，店铺，品牌名。</span>
        </div>
    </div>
    <p flex="main:center cross:center">搜索</p>
</section>
<!--搜索栏  结束-->


<!--商品列表导航  开始-->
<section id="List" flex>
    <div class="list" flex-box="1" flex="dir:top main:center cross:center">
        <div class="frame" flex="main:center cross:center">
            <img src="../image/product-1.png"/>
        </div>
        <p>家用电器</p>
    </div>

    <div class="list" flex-box="1" flex="dir:top main:center cross:center">
        <div class="frame" flex="main:center cross:center">
            <img src="../image/product-2.png"/>
        </div>
        <p>手机数码</p>
    </div>

    <div class="list" flex-box="1" flex="dir:top main:center cross:center">
        <div class="frame" flex="main:center cross:center">
            <img src="../image/product-3.png"/>
        </div>
        <p>电脑办公</p>
    </div>

    <div class="list" flex-box="1" flex="dir:top main:center cross:center">
        <div class="frame" flex="main:center cross:center">
            <img src="../image/product-4.png"/>
        </div>
        <p>家具家纺</p>
    </div>

</section>
<!--商品列表导航  结束-->


<!--筛选框  开始-->
<nav id="choice" flex="main:center cross:center">
    <a href="#" class="on" flex-box="1" flex="main:center cross:center">综合排序</a>
    <a href="#" flex-box="1" flex="main:center cross:center">附近商家</a>
    <a href="#" class="bor-none" flex-box="1" flex="main:center cross:center">选择地区</a>
</nav>
<!--筛选框  结束-->


<!--详细列表  开始-->
<section id="detail">
    <div class="form">
        <div class="up" flex="main:justify cross:center">
            <h1>福州VANS专卖店</h1>
            <i class="iconfont icon-Right"></i>
        </div>
        <div class="down" flex="main:justify cross:center">
            <img src="../image/store-1.png"/>
            <div class="right"  flex-box="1" flex="dir:top main:justify cross:left">
                <p class="add">福建省福州市鼓楼区鼓山旁福马路君临东城沃尔玛4楼</p>
                <div flex="main:justify cross:center">
                    <p flex="main:left cross:center">
                        <span class="distance">距离670m</span>
                        <span class="focus">关注人数103</span>
                    </p>
                    <p class="bts" flex="main:right cross:center">
                        <button type="button" class="normal">未关注</button>
                        <button type="button" class="click">已关注</button>
                    </p>
                </div>

            </div>
        </div>
    </div>

    <div class="form">
        <div class="up" flex="main:justify cross:center">
            <h1>福州潮人服饰</h1>
            <!--<i class="iconfont icon-Right"></i>-->
        </div>
        <div class="down" flex="main:justify cross:center">
            <img src="../image/store-2.png"/>
            <div class="right"  flex-box="1" flex="dir:top main:justify cross:left">
                <p class="add">福建省福州市仓山区六一南路汇达广场旁服装城103号</p>
                <div flex="main:justify cross:center">
                    <p flex="main:left cross:center">
                        <span class="distance">距离670m</span>
                        <span class="focus">关注人数103</span>
                    </p>
                    <p class="bts" flex="main:right cross:center">
                        <button type="button" class="normal">未关注</button>
                        <button type="button" class="click">已关注</button>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="form">
        <div class="up" flex="main:justify cross:center">
            <h1>福州VANS专卖店</h1>
            <!--<i class="iconfont icon-Right"></i>-->
        </div>
        <div class="down" flex="main:justify cross:center">
            <img src="../image/store-3.png"/>
            <div class="right"  flex-box="1" flex="dir:top main:justify cross:left">
                <p class="add">福建省福州市仓山区六一南路汇达广场旁服装城103号</p>
                <div flex="main:justify cross:center">
                    <p flex="main:left cross:center">
                        <span class="distance">距离670m</span>
                        <span class="focus">关注人数103</span>
                    </p>
                    <p class="bts" flex="main:right cross:center">
                        <button type="button" class="normal">未关注</button>
                        <button type="button" class="click">已关注</button>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="form">
        <div class="up" flex="main:justify cross:center">
            <h1>福州水密码专卖店</h1>
            <!--<i class="iconfont icon-Right"></i>-->
        </div>
        <div class="down" flex="main:justify cross:center">
            <img src="../image/store-1.png"/>
            <div class="right"  flex-box="1" flex="dir:top main:justify cross:leftr">
                <p class="add">福建省福州市鼓楼区鼓山旁福马路君临东城沃尔玛4楼</p>
                <div flex="main:justify cross:center">
                    <p flex="main:left cross:center">
                        <span class="distance">距离670m</span>
                        <span class="focus">关注人数103</span>
                    </p>
                    <p class="bts" flex="main:right cross:center">
                        <button type="button" class="normal">未关注</button>
                        <button type="button" class="click">已关注</button>
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>
<!--详细列表  结束-->

</body>
</html>